.header{
    padding: 0.3rem;
}
.header .title{
    font-size: .32rem;
    color: #333;
    font-weight: 600;
}
.header .publisher{
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: .24rem;
    margin-top: .24rem;
}
.body {
    margin-bottom: 1.4rem;
}
.article {
    font-size: .28rem;
    padding: .24rem 0 .48rem;
    margin: 0 .3rem;
    border-top: .02rem solid #f8f8f8;
    border-bottom: .02rem solid #f8f8f8;
}
.article p, .article span, .article img {
    width: 100%;
}
.article p, .article span {
    word-break: break-all;
}
.box {
    padding: .48rem .3rem 0;
}

.box .files {
    display: flex;
    flex-wrap: wrap;
}
.box > p {
    font-size: .28rem;
    color: #333;
    margin-bottom: .2rem;
}
.files .file {
    width: 1.4rem;
    text-align: center;
    margin-right: calc(1.3rem / 3);
    margin-bottom: .2rem;
}
.files .file:nth-child(4n) {
    margin-right: 0;
}
.file > img {
    width: 1rem;
    height: 1rem;
    margin: 0 auto;
}
.file > p {
    font-size: .24rem;
    color: #999;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: .08rem 0;
}
.file > a {
    padding: .02rem .24rem;
    color: #1890ff;
    border: .02rem solid #1890ff;
    border-radius: .08rem;
}
.schedule {
    margin: .3rem 0;
}
.schedule > div {
    display: flex;
}
.schedule .rate {
    width: .3rem;
    margin: 0 .3rem;
}
.rate .rate-bar {
    width: 100%;
    height: calc(100% - .04rem);
    margin-top: .06rem;
}
.rate-bar > i {
    width: .2rem;
    height: .2rem;
    border: .04rem solid #1890FF;
    border-radius: 50%;
    display: block;
    margin: 0 auto;
}
.rate-bar > span {
    width: .04rem;
    height: calc(100% - .2rem);
    background: #e9e9e9;
    padding: .12rem 0;
    display: block;
    margin: .02rem auto 0;
}
.rate-detail {
    flex: 1;
}
.rate-detail .progress-detail {
    display: flex;
    justify-content: space-between;
}
.progress-detail .detail {
    flex: 1;
}
.progress-detail .detail > p:first-child {
    font-size: .28rem;
    color: #333;
    margin-bottom: .1rem;
}
.progress-detail .information {
    display: flex;
    justify-content: space-between;
    margin-bottom: .1rem;
    font-size: .24rem;
    color: #999;
}
.information .remarks {
    margin-left: .2rem;
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 2rem;
}
.information > i {
    font-size: .32rem;
    margin-right: .2rem;
}
.information > span:last-child, .remark-popup .content > span:last-child {
    color: #2081f7;
}
.information > span.none, .remark-popup .content > span.none {
    color: #fac037;
}
.foot {
    width: 100%;
    padding: .3rem;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    background: #fff;
    display: flex;
}
.foot .send {
    flex: 1;
    height: .8rem;
    line-height: .8rem;
    font-size: .36rem;
    background: #1890ff;
    color: #fff;
    text-align: center;
    border-radius: .08rem;
}
.foot .send:last-child {
    margin-left: .3rem;
}
    /* popup */
.remark-popup {
    width: 5.5rem;
    min-height: 6rem;
    border-radius: .16rem;
    padding: 0 .4rem;
}
.remark-popup > p {
    font-size: .36rem;
    color: #333;
    margin: .4rem 0;
    text-align: center;
}
.remark-popup .content {
    display: flex;
    justify-content: space-between;
    font-size: .24rem;
    color: #666;
}
.remark-popup .remarks {
    width: 100%;
    min-height: 3.2rem;
    max-height: 8rem;
    background: #f8f8f8;
    word-break: break-all;
    padding: .2rem .1rem;
    margin: .5rem 0 .6rem;
    overflow: scroll;
    font-size: .26rem;
}

